import { useEffect, useContext } from 'react';

import { MySdkStoreContext } from '../../context';
import { globalJump } from '../../utils';
import { observer } from "mobx-react-lite";
import './style.scss';

export default observer((props) => {
  const { cid, from } = props;
  const mySdkStore = useContext(MySdkStoreContext);

  let timer;

  useEffect(() => {
    // 新消息提示展示3s后，自动关闭
    timer = setTimeout(() =>{
      mySdkStore.setNewMessageTopBarProps({
        visible: false
      });
    }, 3000);

    return () => {
      clearTimeout(timer);
    }
  }, []);

  const handleCheck = () => {
    globalJump(`#/chatDetail/${cid}`);
    mySdkStore.setNewMessageTopBarProps({
      visible: false
    });
  }

  return cid === mySdkStore.cid ? null : <div className="normalMessageComponent" onClick={handleCheck}>
    {from?.userName || from?.userId} 发来一条消息
  </div>
})